<template>
	<view class="personal-page">
		<!-- 顶部信息区（适配自定义导航+状态栏） -->
		<view class="top-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<image src="/static/图层 1@3x.png" class="top-bg" mode="widthFix" />
			<!-- 头像+用户信息容器（绝对定位，居中垂直） -->
			<view class="user-info">
				<image src="/static/老人4.png" class="avatar" mode="aspectFill" @click="goToMyDetail" />
				<view class="user-text">
					<text class="user-name">张先生</text>
					<text class="user-phone">18602564789</text>  
				</view>
			</view>
		</view>

		<!-- 我的优惠券（紧凑布局，图标+文字对齐） -->
		<view class="coupon-box" @click="goToMyCoupons"> 
			<view class="coupon-left">
				<image src="/static/彩色-优惠券.png" class="coupon-icon" mode="aspectFit" />
				<text class="coupon-text">我的优惠券</text>
			</view>
			<view class="coupon-right">
				<text class="coupon-count">3张</text>
				<image src="/static/收起箭头小@3x.png" class="arrow" mode="aspectFit" />
			</view>
		</view>

		<!-- 我的订单（调整卡片样式、状态项间距） -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<view class="all-order" @click="goToMyOrder(0)">
					<text>全部订单</text>
					<image src="/static/收起箭头小@3x.png" class="arrow-icon" mode="aspectFit" />
				</view>
			</view>
			<view class="order-status">
				<view class="status-item blue" @click="goToMyOrder(1)">
					<image src="/static/组 9@3x(0).png" class="status-icon" mode="aspectFit" />
					<text>待支付</text>
				</view>
				<view class="status-item orange" @click="goToMyOrder(2)">
					<image src="/static/组 9@3x(1).png" class="status-icon" mode="aspectFit" />
					<text>待使用</text>
				</view>
				<view class="status-item cyan" @click="goToMyOrder(3)">
					<image src="/static/组 9@3x(2).png" class="status-icon" mode="aspectFit" />
					<text>待评价</text>
				</view>
			</view>
		</view>

		<!-- 我的服务（均匀分布，调整图标尺寸和间距） -->
		<view class="service-section">
			<view class="section-header">
				<text class="section-title">我的服务</text>
			</view>
			<view class="service-list">
				<view 
					class="service-item" 
					v-for="(item, index) in serviceList" 
					:key="index"
					@click="handleServiceClick(item)"
				>
					<image :src="item.icon" class="service-icon" mode="aspectFit" />
					<text class="service-text">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 退出登录（调整按钮样式，更醒目） -->
		<view class="logout-btn">退出登录</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	// 状态栏高度（适配自定义导航，避免内容被遮挡）
	const statusBarHeight = ref(0);

	// 服务列表数据（统一管理，方便维护）
	const serviceList = ref([{
			icon: '/static/组 9@3x(3).png',
			name: '领券中心'
		},
		{
			icon: '/static/组 9@3x(4).png',
			name: '邀请好友'
		},
		{
			icon: '/static/组 9@3x(5).png',
			name: '我的车辆'
		},
		{
			icon: '/static/组 9@3x(6).png',
			name: '消费记录'
		},
		{
			icon: '/static/组 9@3x(7).png',
			name: '我的维修'
		},
		{
			icon: '/static/组 9@3x(8).png',
			name: '意见反馈'
		},
		{
			icon: '/static/组 9@3x(9).png',
			name: '收货地址'
		},
	]);

	// 跳转到个人信息详情页
	const goToMyDetail = () => {
		uni.navigateTo({
			url: '/pages/my/MyDetail'
		});
	};

	// 跳转到我的订单页面
	const goToMyOrder = (tabIndex = 0) => {
		uni.navigateTo({
			url: `/pages/my/myOrder?tab=${tabIndex}`
		});
	};

	// 跳转到我的优惠券页面
	const goToMyCoupons = () => {
		uni.navigateTo({
			url: '/pages/my/MyCoupons'
		});
	};

	// 处理服务项点击
	const handleServiceClick = (item) => {
		if (item.name === '消费记录') {
			uni.navigateTo({
				url: '/pages/my/ConsumptionRecord'
			});
		} else if (item.name === '我的车辆') {
			uni.navigateTo({
				url: '/pages/my/MyVehicle'
			});
		} else if (item.name === '领券中心') {
			uni.navigateTo({
				url: '/pages/my/CouponCenter'
			});
		} else if (item.name === '我的维修') {
			uni.navigateTo({
				url: '/pages/my/myRepair'
			});
		} else if (item.name === '收货地址') {
			uni.navigateTo({
				url: '/pages/my/addressList'
			});
		}
		// 其他服务项可以在这里添加跳转逻辑
	};

	onLoad(() => {
		// 获取状态栏高度，动态适配顶部布局
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight;
	});
</script>

<style scoped>
	/* 页面整体：重置默认边距，统一背景色 */
	.personal-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* 顶部信息区（自定义导航核心适配） */
	.top-bar {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		top: 0; /* 背景图顶格，消除上方留白 */
		left: 0;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #00d4ff 100%); /* 渐变背景作为fallback */
		overflow: hidden;
	}

	.top-bg {
		width: 100%;
		height: auto; /* 保持背景图宽高比，纵向自适应 */
		min-height: 320rpx; /* 保证背景图纵向覆盖足够区域 */
		display: block;
	}

	.user-info {
		position: absolute;
		  top: 60%; /* 调整垂直位置，在背景图内居中 */
		  left: 50%;
		  transform: translate(-50%, -50%);
		  display: flex;
		  flex-direction: column;
		  align-items: center;
	}

	.avatar {
		 width: 160rpx;
		  height: 160rpx;
		  border-radius: 50%;
		  border: 8rpx solid rgba(255, 255, 255, 0.5); /* 半透明白色边框，增强视觉层次 */
		  margin-bottom: 20rpx; /* 头像与文字之间的间距 */
	}

	.user-text {
		margin-left: 0; /* 去掉左侧间距，居中对齐 */
		  display: flex;
		  flex-direction: column;
		  align-items: center;
	}

	.user-name {
		font-size: 36rpx; /* 字号加大，更醒目 */
		  font-weight: bold;
		  margin-bottom: 10rpx;
	}

	.user-phone {
		font-size: 28rpx;
		  opacity: 0.9;
	}

	/* 优惠券区：左右对齐，紧凑布局 */
	.coupon-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		background: #fff;
		margin: 20rpx 20rpx 0;
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.coupon-left {
		display: flex;
		align-items: center;
	}

	.coupon-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.coupon-text {
		font-size: 32rpx;
		color: #333;
		margin-left: 16rpx;
	}

	.coupon-right {
		display: flex;
		align-items: center;
	}

	.coupon-count {
		font-size: 28rpx;
		color: #ff6733;
		/* 优惠券数量红色突出 */
		margin-right: 12rpx;
	}

	.arrow {
		width: 24rpx;
		height: 24rpx;
	}

	/* 公共section头部：标题+全部订单对齐 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 16rpx;
		box-sizing: border-box;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.all-order {
		font-size: 28rpx;
		color: #999;
		display: flex;
		align-items: center;
	}

	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
		margin-left: 8rpx;
	}

	/* 订单区：卡片样式+状态项均匀分布 */
	.order-section {
		margin: 20rpx 20rpx 0;
		box-sizing: border-box;
	}

	.order-status {
		display: flex;
		  justify-content: space-between; /* 三按钮均匀分布 */
		  padding: 24rpx 20rpx;
		  background: #fff;
		  border-radius: 16rpx;
		  box-sizing: border-box;
	}

	.status-item {
		display: flex;
		  flex-direction: column;
		  align-items: center;
		  width: 30%; /* 三按钮等分宽度 */
		  padding: 30rpx 0;
		  border-radius: 12rpx;
		  color: #fff;
	}

	/* 调整状态项背景色（更贴近常见设计） */
	.blue {
		background: #42a5f5;
	}

	.orange {
		background: #ff9800;
	}

	.cyan {
		background: #26c6da;
	}

	.status-icon {
		 width: 60rpx;
		  height: 60rpx;
		  margin-bottom: 16rpx;
	}

	.status-item text {
		font-size: 32rpx;
		  font-weight: 500;
	}

	/* 服务区：均匀分布，图标+文字居中 */
	.service-section {
		margin: 20rpx 20rpx 0;
		box-sizing: border-box;
	}

	.service-list {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.service-item {
		width: 33.333%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 36rpx;
		box-sizing: border-box;
	}

	.service-icon {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 16rpx;
	}

	.service-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 退出登录：醒目按钮样式 */
	.logout-btn {
		text-align: center;
		padding: 26rpx 0;
		background: #fff;
		border: 2rpx solid #ff4d4f;
		color: #ff4d4f;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 16rpx;
		margin: 40rpx 20rpx;
		box-sizing: border-box;
	}
</style>